<template>
         <div class="main">
             <ul>
                 <li v-for='(item,index) in dataList' :class='{otherColor:parseInt(index/6)%2 == 1,searchColor:index == isIndex}'>{{item}}</li>
             </ul>
             <p class="nullContent" v-show='nullContent'>暂无数据</p>
         </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                dataList: [],
                nullContent: false,
                isHave:false,
                isIndex:null,
                parentCode: this.$store.state.stockManage.midParentCode,
                littleBoxPostData: this.$store.state.stockManage.littleBoxPostData
            }
        },
        created: function() {
            this.$store.state.stockManage.codeBox = 1;
            this.$root.eventHub.$on('littleCodeSearch', (o) => {
                this.isHave = false;
                for(let i=0;i<this.dataList.length;i++){
                    if(o == this.dataList[i]){
                        this.isHave = true;
                        this.isIndex = i;
                        break;
                    }else{
                        this.isIndex = null;
                    }
                }
                if(this.isHave == false){
                    this.$message('没有找到哦');
                }
            });
            if (this.parentCode != '') {
                this.getLittleBoXList();
            } else {
                this.getBigBoXList(this.littleBoxPostData);
            }
        },
        methods: {
            getLittleBoXList: function() {
                this.$store.commit('showLoading');
                this.getFindChildCodeList({
                    parentCode: this.parentCode
                }).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        this.dataList = data.data;
                        if (data.data.length == 0) {
                            this.nullContent = true;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg))
            },
            getBigBoXList: function(list) {
                this.$store.commit('showLoading');
                this.getMaxPackingCodeList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        this.dataList = data.data;
                        if (data.data.length == 0) {
                            this.nullContent = true;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg))
            },
            ...mapActions(['getMaxPackingCodeList', 'getFindChildCodeList'])
        },
        beforeDestroy: function() {
            this.$root.eventHub.$off('littleCodeSearch');
            this.$store.commit('clearMidParentCode');
        }
    }

</script>
<style scoped>
    .main {
        width: 100%;
        background-color: #fff;
        margin: 10px 0 0;
        margin-top: 10px;
    }
    
    ul {
        margin: 0;
        padding: 0;
        border-top: 1px solid #ddd;
        overflow: hidden;
    }
    
    li {
        float: left;
        width: 16.66%;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        background-color: #fff;
    }
    
    li:nth-child(6n) {
        border-right: none;
    }
    
    .otherColor {
        background-color: #FBFBFB;
    }
      .searchColor{
        background-color: #1CAFBA;
        color:#fff;
    }
</style>
